<script setup>
import { showLoadingToast, showToast, closeToast } from "vant";
import { useMyStore } from "@/store/index";
import { Upload } from "@/utils/index";
import { InspectElement } from "@/utils/other/components";
const props = defineProps(["type", "accept", "dataJson", "callback"]);
const pageContent = useMyStore().customArtwork.pageContent;
const store = useMyStore();
const uploadMaxSize = {
  image: 5 * 10000 * 1024,
  video: 5 * 10000 * 1024,
  audio: 5 * 1000 * 1024,
};
const uploadToast = {
  image: "单个图片素材不能大于2M",
  video: "视频素材不大于50M",
  audio: "音频素材不能超过5M",
};
const onUpload = async (file) => {
  if (
    InspectElement("video") ||
    InspectElement("audio") ||
    InspectElement("music")
  ) {
    showToast("同一个页面中录音、背景音乐、视频只能添加一个");
    return;
  }
  showLoadingToast({
    message: "素材上传中，请稍等",
    forbidClick: true,
    duration: 0,
  });
  const cloneData = JSON.parse(JSON.stringify(props.dataJson));
  let urlData = await Upload(props.type, file);
  cloneData.url = urlData.url;
  cloneData.zIndex = pageContent.length || 0;
  if (pageContent[store.pageIndex]) {
    cloneData.content = file.content;
    cloneData.zIndex = pageContent.length;
    pageContent[store.pageIndex].push(cloneData);
  } else {
    cloneData.content = file.content;
    cloneData.zIndex = pageContent.length;
    pageContent.push([cloneData]);
  }
  closeToast();
  props.callback();
};
</script>
<template>
  <van-uploader
    max-count="1"
    :max-size="uploadMaxSize[type]"
    @oversize="showToast(uploadToast[type])"
    :before-read="onUpload"
    :accept="accept"
  >
    <slot></slot>
  </van-uploader>
</template>

<style lang="less" scoped></style>
